<template>
  <!-- 课程详情页 -->
  <div>
    <div class="fill"></div>
    <div class="box">
      <div class="main">
        <!-- 课程购买 -->
        <div class="h270">
          <div class="w460">
            <img
              v-lazy="courseDetail.image === null ? '' : courseDetail.image"
              alt=""
            />
          </div>
          <div class="w700">
            <div class="h34">{{ courseDetail.title }}</div>
            <div class="h122">
              <div class="time">
                <div>
                  <i class="iconfont icon-040shizhong"></i> 更新时间：<span>{{
                    courseDetail.updateDate | formatTime
                  }}</span>
                </div>

                <div
                  class="info"
                  v-if="courseDetail.type != '3' && courseDetail.type != '6'"
                >
                  <span>{{
                    courseDetail.playNum === null ? "0" : courseDetail.num
                  }}</span>
                  人已看 | 共<span>{{ courseDetail.videoNum }}</span> 节录播 |
                  <span class="orangecolor"
                    >{{
                      courseDetail.updateState === "1" ? "更新中" : "更新完毕"
                    }}
                  </span>
                </div>
              </div>
              <div class="teacherinfo">
                <div class="avatar">
                  <img v-lazy="courseDetail.teacherImg" alt="" />
                </div>
                <div class="nm">{{ courseDetail.teacherName }}</div>
              </div>
            </div>
            <div class="price" @click="submitCourseOrder">
              <span class="line-through"
                >¥ {{ courseDetail.originalPrice }}</span
              >
              <span class="vip"
                >vip: <span class="money_icon">¥</span>
                {{ courseDetail.price }}</span
              >
              <strong>立即购买</strong>
            </div>
          </div>
        </div>

        <!-- 一对一和专项服务课程显示 -->
        <div class="tips" v-if="type == '3' || type == '6'">
          <div><img src="@/assets/imgs/1v1/1v1.png" alt="" /></div>
          <div>
            <h1>有问题？</h1>
            <p>扫描右侧二维码获得专属客服...</p>
          </div>
          <div class="txt">
            <span>报名咨询</span>
            <span>答疑解惑</span>
            <span>1对1服务助手</span>
          </div>
          <div class="code">
            <img :v-lazy="courseDetail.coutentUrl" alt="" />
          </div>
        </div>
        <!-- tab切换区域 -->
        <div class="info-tab" v-else>
          <div>
            <span
              :class="{ active: currentPage === 'courseIntro' }"
              @click="currentPage = 'courseIntro'"
            >
              课程介绍</span
            >
            <span
              @click="currentPage = 'scheduling'"
              :class="{ active: currentPage === 'scheduling' }"
              >课时安排</span
            >
            <span
              :class="{ active: currentPage === 'proved' }"
              @click="getVideo"
              >视频试看</span
            >
            <span
              :class="{ active: currentPage === 'downloadNote' }"
              @click="currentPage = 'downloadNote'"
              >笔记下载</span
            >
          </div>
        </div>
        <!-- :课程概述、课时安排、视频试看、笔记下载 -->
        <!-- 课程概述 -->
        <div v-show="currentPage === 'courseIntro'" class="h245">
          <div class="title">课程概述</div>
          <div class="txt" v-html="courseDetail.content">
            {{ courseDetail.content }}
          </div>
        </div>
        <!-- 视频试看 -->
        <div
          v-if="type != '3' || type != '6'"
          v-show="currentPage === 'proved'"
        >
          <div class="proved">
            <div>
              <span class="title">{{ skName }}</span>
              <span class="desc"></span>
            </div>
            <div>
              <span class="vip" v-if="playerOptions.sources[0].src != ''"
                >会员查看更多完整版</span
              >
            </div>
          </div>
          <!-- 视频 -->
          <div class="video" v-if="playerOptions.sources[0].src != ''">
            <video-player
              class="video-player-box"
              ref="videoPlayer"
              :options="playerOptions"
              :playsinline="true"
              customEventName="customstatechangedeventname"
              @play="onPlayerPlay($event)"
              @pause="onPlayerPause($event)"
              @ended="onPlayerEnded($event)"
              @ready="playerReadied"
            >
            </video-player>
          </div>
        </div>
        <!-- 课时安排 -->
        <div
          v-if="type != '3' || type != '6'"
          class="sched"
          v-show="currentPage === 'scheduling'"
        >
          <ul>
            <li v-for="(item, index) in ksList" :key="index">
              <span class="imgshow">
                <img :src="item.image" alt="" />
              </span>
              <span class="title">
                {{ item.name }}
                <span>{{
                  item.content ? item.content.substring(0, 50) : ""
                }}</span>
              </span>
              <span class="btns">
                <span @click="toVideoPlay(item)">
                  <i class="iconfont icon-triangle-right"></i>
                  {{ item.isFree === "0" ? "免费" : "收费" }}
                </span>
                <!-- <router-link :to="'/videoplay?id=' + item.id">
                  <i class="iconfont icon-triangle-right"></i>
                  {{ item.isFree === "0" ? "免费" : "收费" }}
                </router-link> -->
              </span>
            </li>
          </ul>
          <!-- 分页器 -->
          <!-- 分页区域 -->
          <!-- current-change：是指页码发生改变时触发 -->
          <!-- current-page：指当前页码 -->
          <!-- page-size：指每页显示的条数 -->
          <!-- layout：指配置分页显示样式，控制分页组件 UI 的显示 -->
          <!-- total：总条目数 -->
          <!-- <el-pagination
            large
            background
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="total"
            :current-page="curr_page"
            @current-change="handleCurrentChange"
          >
          </el-pagination> -->
        </div>
        <!-- 笔记下载 -->
        <div
          v-if="type != '3' || type != '6'"
          v-show="currentPage === 'downloadNote'"
          class="note-download"
        >
          <div>抱歉！功能暂未开放~</div>
        </div>

        <!-- 课程列表 -->
        <div
          v-show="currentPage === 'courseIntro' || currentPage === 'scheduling'"
          class="h350"
        >
          <div id="list-con">
            <span class="toleft" @click="toLeft">&lt;</span>
            <span class="toright" @click="toRight">&gt;</span>
            <p class="title">{{ courseName }}列表</p>
            <!-- PTE课区域 -->

            <div class="container">
              <div class="zbcourse" :style="{ 'margin-left': move + 'px' }">
                <div v-for="(item, index) in courseList" :key="index" id="list">
                  <router-link @click.native="goTo(item.id)" to="">
                    <img :src="item.image" alt=""
                  /></router-link>
                  <span class="setcenter">
                    <p class="title-intro">{{ item.title }}</p>
                    <p class="pdl20" v-html="item.memo"></p>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗支付 -->
    <div class="mask" v-if="showMask">
      <div class="radio">
        <img src="../../assets/imgs/vip_slices/alipay.png" alt="" />
        <el-radio v-model="radio" label="1">支付宝</el-radio>
        <img src="../../assets/imgs/vip_slices/wxpay.png" alt="" /><el-radio
          v-model="radio"
          label="2"
          >微信</el-radio
        >
      </div>
      <div class="btn">
        <div class="cancle" @click="showMask = false">取消</div>
        <div class="sure" @click="toPay">确定</div>
      </div>
    </div>

    <el-dialog
      width="20%"
      :title="'请扫码支付'"
      @close="closeCode"
      :visible.sync="innerVisible"
    >
      <div class="paycode">
        <!-- 放置二维码的容器,需要给一个ref -->
        <div id="qrcode" ref="qrcode"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
import api from '@/config/api'
import { sendPost } from '@/utils/http'
import QRCode from 'qrcodejs2'
// import Vue from "vue";
import userUtils from '@/utils/userUtil'
export default {
  name: 'Cclcourseinfo',
  components: {
    videoPlayer
  },
  watch: {
    $route () {
      this.id = this.$route.query.id;
    },
    id () {
      location.reload()
    }
  },
  data () {
    return {
      isLogin: userUtils.isLogin(),
      move: 0,
      innerVisible: false,
      codeUrl: '',
      showMask: false,
      radio: '', // 1代表支付宝，2代表微信
      // 课程id
      courseId: '',
      courseDetail: {
        image: '',// 封面url
        title: '',//标题
        memo: '',//描述
        playNum: '',//观看次数
        updateDate: '',//最后更新时间
        teacherName: '',//老师
        teacherImg: '',//老师头像
        content: '',//课程概述
        originalPrice: '',//原价
        price: '',//现价，折扣价
        updateState: '',//更新状态 1更新中 2更新完毕
        coutentUrl: '',//报名图
        videoNum: '',//课程数量
        type: ''
      }, // 课程详情
      ksList: {
        image: '',
        url: '',
        name: '',
        num: '',
        isFree: '',
        isUse: ''
      },
      courseName: '',
      total: 0,
      pageSize: 2,
      curr_page: 1,
      isRec: "",
      orderId: '', // 订单id
      currentPage: 'courseIntro',
      playerOptions: {
        // videojs options
        muted: true,
        language: 'zh-CN',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。
        sources: [{
          type: 'video/mp4',
          src: ''
        }],
        poster: '' // 你的封面地址
      },
      type: "", // 获取课程列表的参数
      courseList: [],
      id: '',

      skUrl: '', // 试看地址
      skName: '', // 视看视频名称
      playerOptions1: {
        // videojs options
        muted: true,
        language: 'zh-CN',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。
        sources: [{
          type: 'video/mp4',
          src: ''
        }],
        poster: '' // 你的封面地址
      },
      data: {},

      params: {
        video_skUrl: '',
        video_url: '',
        video_poster: '',
        name: '',
        content: '',
        playNum: '',
        endDate: '',
        teacherImg: '',
        teacherName: ''
      }
    }
  },
  computed: {
    player () {
      return this.$refs.videoPlayer.player
    }
  },
  created () {
    this.type = this.$route.query.type;

    if (this.$route.query.isRec) {
      this.isRec = this.$route.query.isRec
    }


    // 调用获取课程详情方法

    this.courseId = this.$route.query.id;
    // 调用获取试看课时的方法
    this.getKsList()
    this.getCourseList()

    // this.getCourseSk()
  },
  mounted () {
    this.getCourseDetails()
  },
  methods: {
    // 获取视频连接
    getData (item) {
      var that = this
      sendPost(api.getCourseVideoUrl, { id: item.id }).then((res) => {
        that.params.video_url = res.data.url
        that.params.video_skUrl = res.data.skUrl
        that.params.video_poster = res.data.image
        that.params.num = res.data.num
        that.params.name = res.data.name
        that.params.content = res.data.content
        that.params.playNum = res.data.playNum
        that.params.endDate = res.data.endDate
        that.params.teacherImg = res.data.teacherImg
        that.params.teacherName = res.data.teacherName

      })
    },


    // 观看视频
    toVideoPlay (item) {

      this.$router.push('/videoplay?id=' + item.id)
      // var that = this
      // this.$confirm('确认后将扣除一次观看次数!', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   this.getData(item)

      //   setTimeout(() => {
      //     var that = this
      //     console.log(item);

      //   }, 1500);



      // }).catch(() => {
      //   this.$msg({
      //     type: 'info',
      //     message: '已取消观看'
      //   });
      // });


    },
    // 左右滚动
    toLeft () {
      if (this.move < 0) {
        this.move += 300;
      }
    },

    toRight () {
      if (this.move > this.move - this.courseList.length) {
        this.move -= 300;
      }
    },



    getVideo () {
      this.getCourseSk()
      this.currentPage = 'proved'
    },
    // 获取试看视频
    getCourseSk () {
      sendPost(api.getCourseSk, { courseId: this.courseId }).then(res => {
        console.log(res);
        this.playerOptions.sources[0].src = res.data.skUrl
        // this.playerOptions.poster=res.data.image
        this.skName = res.data.name
      })
    },
    // 获取课程列表
    getCourseList () {
      sendPost(api.getCourseList, { type: this.type, offset: 0, limit: 10 }).then(res => {
        // console.log(res);
        this.courseList = res.data
        this.courseName = res.data.title
      })

      // 精选好课
      if (this.isRec == '1') {
        sendPost(api.getCourseList, { isRec: '1', offset: 0, limit: 10 }).then(res => {
          console.log(res);
          this.courseList = res.data
        })
        return
      }
    },
    // 获取免费好课列表
    getFreeCourseList () {
      sendPost(api.getFreeCourseList, { courseId: '0', offset: 0, limit: 10 }).then(res => {
        // console.log(res.data);
        this.courseList = res.data
      })
    },
    // 获取精选好课列表

    // 获取课程详情
    getCourseDetails () {
      // console.log(this.courseId);
      sendPost(api.getCourseDetails, { id: this.courseId }).then(res => {
        // console.log(res.data);
        this.courseDetail.image = res.data.image
        this.courseDetail.title = res.data.title
        this.courseName = res.data.typeName
        this.courseDetail.memo = res.data.memo
        this.courseDetail.playNum = res.data.playNum
        this.courseDetail.updateDate = res.data.updateDate
        this.courseDetail.teacherName = res.data.teacherName
        this.courseDetail.teacherImg = res.data.teacherImg
        this.courseDetail.content = res.data.content
        this.courseDetail.originalPrice = res.data.originalPrice
        this.courseDetail.price = res.data.price
        this.courseDetail.updateState = res.data.updateState
        this.courseDetail.coutentUrl = res.data.coutentUrl
        this.courseDetail.videoNum = res.data.videoNum
        this.courseDetail.typeName = res.data.typeName
        this.courseDetail.type = res.data.type
        this.courseDetail = res.data
      })
    },
    // 获取课时列表
    getKsList () {
      sendPost(api.getKsList, { courseId: this.courseId }).then(res => {
        // console.log(res)
        this.ksList = res.data
      })
    },
    // 当前页码发生改变时触发
    handleCurrentChange (value) {
      // console.log(value)
      this.curr_page = value
      this.getKsList()
    },
    // listen event
    onPlayerPlay (player) {
      // console.log('player play!', player)
    },
    onPlayerPause (player) {
      // console.log('player pause!', player)
    },
    // ...player event
    onPlayerEnded (player) { },

    // or listen state event
    playerStateChanged (playerCurrentState) {
      // console.log('player current update state', playerCurrentState)
    },
    // player is ready
    playerReadied (player) {
      // console.log('the player is readied', player)
      // you can use it to do something...
      // player.[methods]
    },
    goTo (id) {
      this.$router.push('/cclcourseinfo?id=' + id);
    },
    //课程下单
    submitCourseOrder () {
      if (this.isLogin) {
        this.showMask = true
      } else {
        this.$router.push('login')
      }
    },
    // 确认下单
    toPay () {
      // 支付宝支付
      if (this.radio == '1') {
        sendPost(api.submitCourseOrder, {
          objId: this.courseId,
          paymentMethod: '0'
        }).then(res => {
          window.location.href = 'https://www.go4nines.com/easton_interface/api//payApi/aliOrderParam?orderId=' + res.data
        }
        )
        // 微信支付：扫码
      } else if (this.radio == '2') {
        sendPost(api.submitCourseOrder, {
          objId: this.courseId,
          paymentMethod: '1'
        }).then(res => {
          console.log(res.data);
          this.innerVisible = true
          // 生成支付二维码
          this.getWxPayCode(res.data)
        }
        )
      }
    },

    // 获取微信支付二维码
    getWxPayCode (id) {
      this.orderId = id
      sendPost(api.getWxPayCode, { orderId: id }).then(res => {
        console.log(res.data);
        this.codeUrl = res.data.code_url
        this.$nextTick(() => {
          this.crateQrcode()
          this.getOrderstate()
        })
      }
      )
    },

    // 生成二维码
    crateQrcode () {
      this.qr = new QRCode('qrcode', {
        width: 150,
        height: 150, // 高度
        text: this.codeUrl // 二维码内容
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f'
        // foreground: '#ff0'
      })
      // console.log(this.qrcode)
    },

    // 关闭弹框,清除已经生成的二维码
    closeCode () {
      this.$refs.qrcode.innerHTML = ''
      // 关闭弹框的时候清除定时器
      clearInterval(this.timers)

    },


    // 调用一个判断支付是否成功的接口，用这个接口我们监听微信是否支付成功
    getOrderstate () {
      let num = 0
      this.timers = setInterval(() => { //创建一个全局的定时器
        num++
        sendPost(api.getOrderState, { orderId: this.orderId }, 'show').then(res => {
          // console.log(res);
          if (res.data.state == 9) { //判断 如果data.state==9 代表支付成功
            this.$router.push({
              path: '/regcourselist', //成功以后的跳转路径
            })
            this.$msg.success('支付成功！')
            this.innerVisible = false
            clearInterval(this.timers) //别忘记关闭定时器，否则会一直调这个接口
          }
        })
        if (num == 500) { //这里是判断num++到500的情况下用户还没有支付则自动关闭定时器和二维码
          this.innerVisible = false
          clearInterval(this.timers)
        }
      }, 5000)
    },

    // 还有一步是最容易被忽略的 跳转页面的时候也应该关闭定时器
    beforeDestroy () {
      if (this.timers) {
        clearInterval(this.timers); //关闭
      }
    },

  }
}
</script>

<style>
body,
html {
  background-color: #fff;
}
</style>
<style lang="less" scoped>
// 单选
// .el-radio {
//   // margin-left: 3.125rem;
//   // white-space: pre-wrap;
//   // line-height: 2.1875rem;
// }
/deep/.el-radio__input.is-checked .el-radio__inner {
  background-color: #ff5e4e;
  border-color: #ff5e4e;
}
/deep/.el-radio__input.is-checked + .el-radio__label {
  color: #666;
  width: 70rem;
}
/deep/.el-radio__label {
  font-size: 1.125rem;
}
/deep/.el-radio-group {
  width: 70rem;
}
.mask {
  background-color: #fff;
  padding: 30px;
  width: 400px;
  height: 200px;
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 999;
  box-shadow: -2px 2px 8px 5px #888888;
  transform: translate(-50%, -50%);
  border-radius: 1.875rem;
  .radio {
    display: flex;
    justify-content: space-around;
  }
  // 添加颜色类
  .el-radio__input.is-checked + .el-radio__label {
    color: #fd7624 !important;
  }
  .el-radio__input.is-checked .el-radio__inner {
    background: #fd7624 !important;
    border-color: #fd7624 !important;
  }

  .btn {
    display: flex;
    justify-content: space-around;
    font-size: 22px;
    color: #666;
    .cancle,
    .sure {
      width: 100px;
      height: 50px;
      line-height: 50px;
      border-radius: 10px;
      text-align: center;
      background-color: #fd7624;
      color: #fff;
      margin-top: 50px;
      cursor: pointer;
    }
  }
}
// /deep/.video-js .vjs-control-bar {
//   background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)) !important;
//   height: 100px !important;
// }
.active {
  background-color: #ff5e4e;
  color: #fff !important;
}
.box {
  padding-bottom: 9.375rem;
  background-color: #fff;
}
.fill {
  height: 3.75rem;
  background-color: #fff;
}
.main {
  width: 75rem;
  margin: auto;
  height: 100%;
  .h270 {
    height: 16.875rem;
    margin: 3.125rem 0;
    margin-top: 0;
    display: flex;
    justify-content: space-between;
    .w460 {
      width: 28.75rem;
      background-color: #d9d9d9;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .w700 {
      width: 43.75rem;
      .h34 {
        height: 2.125rem;
        color: #333;
        font-size: 2.125rem;
        font-weight: 400;
      }
      .h122 {
        background-color: #eee;
        height: 7.625rem;
        margin: 1.25rem 0 !important;
        .time {
          display: flex;
          padding: 1.25rem;
          box-sizing: border-box;
          flex: 2;
          div {
            box-sizing: border-box;
            font-size: 1.125rem;
            text-align: center;
            color: #999;
            .iconfont {
              color: #1bc7bd;
              font-size: 1.375rem;
              font-weight: bold;
              vertical-align: middle;
            }
          }
        }
        .info {
          flex: 3;
          color: #999;
          font-size: 1.125rem;
          .orangecolor {
            color: #ff5e4e;
          }
        }
        .teacherinfo {
          height: 2.5rem;
          padding: 0 1.25rem;
          display: flex;
          .avatar {
            width: 2.5rem;
            border-radius: 50%;
            overflow: hidden;
            img {
              width: 2.5rem;
              height: 2.5rem;
              border-radius: 50%;
            }
          }
          .nm {
            font-size: 1rem;
            color: #999;
            text-align: center;
            line-height: 2.5rem;
            margin-left: 0.625rem;
          }
        }
      }
      .price {
        height: 3.75rem;
        color: #ff5e4e;
        position: relative;
        line-height: 3.75rem;
        font-size: 2.125rem;
        font-weight: bold;
        cursor: pointer;
        user-select: none;
        strong {
          position: absolute;
          right: 0;
          color: #fff;
          background-color: #ff5e4e;
          width: 6.25rem;
          height: 2.75rem;
          line-height: 2.75rem;
          margin-top: 0.625rem;
          font-size: 1.25rem;
          text-align: center;
          border-radius: 0.625rem;
          user-select: none;
        }
        span {
          margin-right: 140px;
        }
        .line-through {
          text-decoration: line-through;
        }
        .money_icon {
          font-size: 30px;
          margin-right: 0;
        }
      }
    }
  }
  .h240 {
    height: 15rem;
    border: 1px solid rgba(43, 94, 151, 0.09);
    box-shadow: 0px 0px 1.25rem 0px rgba(44, 127, 180, 0.14);
    margin-bottom: 3.125rem;
    padding: 2.5rem 2.75rem 0.8125rem;
    box-sizing: border-box;
    display: flex;
    .w757 {
      width: 47.3125rem;
      display: flex;
      .imgshow {
        width: 11.125rem;
        height: 11.6875rem;
        border: 0.0625rem dashed #999;
        vertical-align: middle;
        img {
          width: 12.5rem;
          height: 7.25rem;
        }
      }
      .tips {
        flex: 2;
        margin-left: 1.25rem;
        .title {
          font-size: 2.1875rem;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #333333;
          line-height: 4.0625rem;
          padding-top: 1.25rem;
          box-sizing: border-box;
        }
        .scancode {
          height: 1.75rem;
          font-size: 1.75rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #666666;
          line-height: 4.0625rem;
        }
      }
    }
    .w195 {
      width: 12.1875rem;
      font-size: 1.75rem;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      border-bottom: 0.75rem;
      div {
        height: 3.125rem;
        position: relative;
        .last {
          width: 11.875rem;
        }
      }
      span {
        display: inline-block;
        width: 8.375rem;
        height: 0.75rem;
        line-height: 0px;
        background-color: #ff9d94;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }
    .code {
      .codeimg {
        width: 10rem;
        height: 10rem;
        border: 0.0625rem solid #eee;
        img {
          width: 100%;
          height: 100%;
          vertical-align: middle;
        }
      }
      .codenum {
        font-size: 0.875rem;
        color: #ccc;
        text-align: center;
      }
    }
  }
  // 课程介绍tab切换
  .info-tab {
    height: 4rem;
    line-height: 4rem;
    border-top: 0.0625rem solid #ededed;
    border-bottom: 0.0625rem solid #ededed;
    box-sizing: border-box;
    margin-bottom: 2.125rem;
    font-size: 1.25rem;
    color: #999;
    div {
      width: 33.5rem;
      margin: auto;
      display: flex;
      span {
        width: 8.125rem;
        cursor: pointer;
        text-align: center;
        color: #999;
      }
      .selected {
        color: #fff;
        background-color: #ff5e4e;
      }
    }
  }
  .h245 {
    // height: 15.3125rem;
    margin-bottom: 3.125rem;
    .title {
      font-size: 1.5rem;
      color: #333;
      line-height: 2rem;
      font-weight: bold;
      margin-bottom: 1.5125rem;
    }
    .txt {
      font-size: 1rem;
      color: #666;
      font-size: 1rem;
      font-family: Microsoft YaHei;
      color: #666;
      line-height: 2rem;
    }
  }
  .sched {
    ul {
      margin-bottom: 3.125rem;
      li {
        display: flex;
        margin-bottom: 1.25rem;
        .imgshow {
          width: 12.5rem;
          height: 7.25rem;
          background-color: #d9d9d9;
          margin-right: 1.875rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .title {
          width: 53.125rem;
          font-size: 1.25rem;
          color: #333;
          display: flex;
          flex-direction: column;
          margin-top: 2.1875rem;
          span {
            font-size: 1rem;
            color: #999;
          }
        }
        .btns {
          width: 7.5rem;
          height: 3.125rem;
          line-height: 3.125rem;
          text-align: center;
          margin: auto;
          background: #ff5e4e;
          border-radius: 0.3125rem;
          cursor: pointer;
          color: #fff;
          font-size: 1.25rem;
          a {
            display: inline-block;
            color: #fff;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .note-download {
    font-size: 1.25rem;
    color: #999;
  }
  .h350 {
    height: 21.875rem;
    // overflow: hidden;
    position: relative;
    .title {
      display: flex;
      font-size: 2.5rem;
      text-align: left;
      justify-content: space-between;
      line-height: 2.5rem;
      a {
        text-decoration: none;
        color: #989799;
        font-size: 1rem;
      }
    }
    .title {
      display: flex;
      font-size: 2.125rem;
      text-align: left;
      justify-content: space-between;
      line-height: 2.5rem;
      // position: relative;
      color: #333;
    }
    .zbcourse {
      display: flex;
      // justify-content: space-between;
      margin-top: 1.25rem;
      width: 1250rem;

      div {
        width: 17.5rem;
        height: 17.5rem;
        background-color: #fff;
        border: 1px solid #eee;
        box-sizing: border-box;
        margin-right: 1.6125rem;
      }
      a {
        display: flex;
        width: 100%;
        height: 10.1875rem;
        background-color: #abcdef;
        position: relative;
        text-decoration: none;
        span {
          position: absolute;
          bottom: 0.625rem;
          right: 0.625rem;
          color: #fff;
          height: 1.5rem;
          line-height: 1.5rem;
          width: 3.75rem;
          text-align: center;
          background-color: #8d8d90;
          z-index: 99;
          opacity: 0.6;
        }
        img {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .setcenter {
        text-align: left;
      }
      .teacher {
        width: 4.875rem;
        height: 1.25rem;
        background-color: #ffdfdc;
        color: #ff8176;
        padding: 0 0.3125rem;
        font-size: 0.875rem;
      }
    }
    .title-intro {
      height: 3.625rem;
      line-height: 3.625rem;
      font-size: 1.25rem;
      color: #666;
      font-weight: 400;
      padding: 0 1.25rem;
    }
    .content,
    .pdl20 {
      font-size: 0.875rem;
      color: #999;
      height: 2.5rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: wrap;
      padding: 0 1.25rem;
      margin-top: -0.4375rem;
    }
  }
  .proved {
    height: 5rem;
    display: flex;
    justify-content: space-between;
    div {
      display: flex;
      flex-direction: column;
      .title {
        font-size: 1.5rem;
        color: #333;
      }
      .desc {
        font-size: 1.25rem;
        color: #999;
      }
      .vip {
        font-size: 1.25rem;
        color: #ff5e4e;
        text-decoration: underline;
        margin-top: 0.9375rem;
      }
    }
  }
  .video {
    height: 42.25rem;
    position: relative;
    margin: 1.25rem auto;
    #vjs_video_3 {
      width: 100%;
    }
    /deep/.video-js .vjs-big-play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .videoplay-title {
      .num {
        display: flex;
        justify-content: space-between;
        font-size: 1.25rem;
        color: #999;
        margin-bottom: 0.625rem;
        .lesson-num {
          font-size: 1.5rem;
          color: #333;
        }
        .iconfont {
          font-size: 1.5rem;
          cursor: pointer;
        }
        .link-serve {
          margin: auto;
          margin-right: 0;
        }
      }
      .info {
        height: 3.75rem;
        font-size: 1.125rem;
        color: #999;
        background: #ededed;
        display: flex;
        justify-content: space-between;
        padding: 0 1.25rem;
        .dead-time {
          flex: 2.5;
          height: 100%;
          line-height: 3.75rem;
        }
        .watcher-num {
          flex: 1.5;
          display: flex;
          padding-left: 12.5rem;
          line-height: 3.75rem;
          .uname {
            width: 7.1875rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
            font-size: 1rem;
          }
          .avatar {
            width: 2.5rem;
            height: 2.5rem;
            margin-left: 1.25rem;
            margin-right: 0.625rem;
            img {
              width: 2.5rem;
              height: 2.5rem;
              border-radius: 50%;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
  .tips {
    height: 15rem;
    border: 1px solid rgba(43, 94, 151, 0.09);
    box-shadow: 0px 0px 1.25rem 0px rgba(44, 127, 180, 0.14);
    margin-bottom: 2.5rem;
    padding: 2.5rem;
    display: flex;
    img {
      width: 11.125rem;
      height: 11.6875rem;
      margin-right: 0.9375rem;
    }
    h1 {
      height: 6.125rem;
      line-height: 6.125rem;
      color: #333;
      font-size: 2.1875rem;
      font-weight: bold;
    }
    p {
      font-size: 1.75rem;
      color: #666;
      margin-right: 8.125rem;
    }
    .txt {
      width: 11.875rem;
      font-size: 1.75rem;
      color: #333;
      display: flex;
      margin-right: 2.5rem;
      flex-direction: column;
      span {
        margin-bottom: 0.4375rem;
        position: relative;
      }
      ::before {
        content: "";
        position: absolute;
        bottom: 0;
        height: 0.875rem;
        width: 100%;
        background-color: #ff9d94;
        opacity: 0.7;
      }
    }
    .code {
      width: 10rem;
      height: 10rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

/deep/.el-pagination button,
.el-pagination span:not([class*="suffix"]) {
  display: inline-block;
  font-size: 0.8125rem;
  min-width: 2.21875rem;
  height: 2.5rem;
  line-height: 2.5rem;
  vertical-align: top;
  box-sizing: border-box;
}
/deep/.el-pager li {
  padding: 0 0.25rem;
  font-size: 0.9375rem;
  min-width: 2.21875rem;
  height: 2.5rem !important;
  width: 2.5rem;
  line-height: 2.5rem;
  box-sizing: border-box;
  text-align: center;
}
::v-deep {
  .el-pagination.is-background .el-pager li:not(.disabled) {
    background-color: #fff; // 进行修改未选中背景和字体
    // color: #fff;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #ff5e4e; // 进行修改选中项背景和字体
    color: #fff;
  }
}
.el-pagination {
  font-size: 1.25rem;
  text-align: center;
  padding-top: 5rem;
}

/deep/.el-dialog__header {
  margin-top: 30vh;
}
/deep/.el-dialog__title {
  padding-left: 4.25rem;
}
/deep/.el-dialog__body {
  width: 100%;
  padding: 2.5rem;
  padding-top: 1rem;
  img {
    width: 100%;
  }
}
.container {
  // position: relative;
  overflow: hidden;
  // overflow-x: scroll;
}
.zbcourse {
  // position: relative;
  overflow-x: hidden;
}
#list-con {
  position: relative;
  // overflow: hidden;
  .toleft {
    position: absolute;
    left: -3.75rem;
    background-color: #1bc7bd;
    top: 60%;
    transform: translateY(-50%);
    font-size: 3.125rem;
    color: #fff;
    z-index: 9999;
    cursor: pointer;
    font-family: Simsun;
    font-weight: bold;
    border-radius: 50%;
    width: 3.125rem;
    height: 3.125rem;
    line-height: 3.125rem;
    text-align: center;
    user-select: none;
  }
  .toright {
    position: absolute;
    right: -3.75rem;
    background-color: #1bc7bd;
    top: 60%;
    transform: translateY(-50%);
    font-size: 3.125rem;
    color: #fff;
    z-index: 9999;
    font-family: Simsun;
    cursor: pointer;
    font-weight: bold;
    border-radius: 50%;
    width: 3.125rem;
    height: 3.125rem;
    line-height: 3.125rem;
    text-align: center;
    user-select: none;
  }
}
</style>
